<template>
    <a-spin :spinning="loading">
        <a-form-model ref="ruleForm" :model="form">
            <a-form-model-item prop="treeData">
                <a-directory-tree :tree-data="form.treeData" @expand="onExpand"
                    :replace-fields="{ children: 'children', key: 'id', value: 'name', title: 'name' }" />
            </a-form-model-item>
        </a-form-model>
    </a-spin>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            header: '',
            form: {
                treeData: [],
                currentDirectory: '',
                currentChildren: [],
            },
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList(file_path = '') {
            console.log(this.currentDirectory)
            this.loading = true
            const { data } = await this.$api.directory.getDirectoryListApi({ file_path })
            if (file_path === '') {
                this.header = data[0].name
            }
            const itemList = data.map(item => {
                if (item.children) {
                    item.children.map(async (subItem, index) => {
                        if (subItem.child) {
                            subItem.children = [{ name: '-' }]
                        }
                    })
                }
                return item
            })
            this.form.treeData = itemList
            this.loading = false
        },
        async onSelect(keys, event) {
            this.loading = true
            const dom = event.selectedNodes[0].dataRef
            const children = dom.children
            let id = dom.id
            let value = dom.name
            let level = dom.lv
            let parent = dom.pre_dir
            let file_path = ''
            if (dom.children && dom.children.length === 0 && dom.name == this.header) {
                this.form.currentChildren = []
                this.$emit('current-children', [])
            } else {
                if (level == '1') file_path = value
                if (Number(level) > 1) file_path = parent + '/' + value
                let isExpanded
                if (children) isExpanded = children[0].name == '-'
                else isExpanded = false
                if (isExpanded && children && value !== this.header) {
                    const { data } = await this.$api.directory.getDirectoryListApi({ file_path })
                    const list = data[0].children.map((item, index) => {
                        if (item.child) {
                            item.children = [{ name: '-' }]
                        }
                        return item
                    })
                    this.deepQuery(this.form.treeData, id, list)
                    this.form.currentChildren = dom.children
                    this.$emit('current-children', dom.children)
                }
            }
            this.loading = false
        },
        async onExpand(list, event) {
            this.loading = true
            const isExpanded = event.expanded
            const dom = event.node.dataRef
            const children = dom.children
            let id = dom.id
            let value = dom.name
            let level = dom.lv
            let parent = dom.pre_dir
            let file_path = ''
            if (dom.children && dom.children.length === 0 && dom.name == this.header) {
                this.form.currentDirectory = '/'
                this.loading = false
                this.$emit('current-directory', '/')
            } else {
                const path = this.getPathByKey(id, this.form.treeData)
                if (level == '1') file_path = value
                if (Number(level) > 1) file_path = parent + '/' + value
                if (isExpanded && value !== this.header && dom.child) {
                    if (children[0].name == '-') {
                        const { data } = await this.$api.directory.getDirectoryListApi({ file_path })
                        const list = data[0].children.map((item, index) => {
                            if (item.child) {
                                if (level <= 15) item.children = [{ name: '-' }]
                                else item.children = [{ name: '文件层级最大为16级' }]
                            }
                            return item
                        })
                        this.deepQuery(this.form.treeData, id, list)
                        this.form.currentChildren = dom.children
                    }
                    else {
                        this.form.currentDirectory = path
                        this.loading = false
                        this.$emit('current-directory', path)
                    }
                }
                this.form.currentDirectory = path
                this.loading = false
                this.$emit('current-directory', path)
            }

        },
        deepQuery(tree, id, children) {
            function deepSearch(tree, id) {
                for (const item of tree) {
                    if (item.children && item.children.length > 0) {
                        deepSearch(item.children, id);
                    }
                    if (id === item.id) {
                        item.children = children
                        break;
                    }
                }
            }
            deepSearch(tree, id);
        },
        getPathByKey(curKey, data) {
            let result = []; // 记录路径结果
            let traverse = (curKey, path, data) => {
                if (data.length === 0) {
                    return;
                }
                for (let item of data) {
                    path.push(item.name);
                    if (item.id === curKey) {
                        result = JSON.parse(JSON.stringify(path));
                        return;
                    }
                    const children = Array.isArray(item.children) ? item.children : [];
                    traverse(curKey, path, children); // 遍历
                    path.pop(); // 回溯
                }
            }
            traverse(curKey, [], data);
            return '/' + result.splice(1).join('/')
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-tree li {
    overflow: hidden;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper {
    text-overflow: ellipsis;
}
</style>